<template>
  <table border="1" align="center">
    <tr>
      <td>编号</td>
      <td>英雄</td>
      <td>法器</td>
      <td>攻击力</td>
      <td>操作</td>
    </tr>
    <tr v-for="(hero,index) in pageInfo.list" :key="index">
      <td>{{hero.id}}</td>
      <td>{{hero.name}}</td>
      <td>{{hero.weapon}}</td>
      <td>{{hero.atk}}</td>
      <td><button @click="deleteHero(hero.id)">删除</button>
        <router-link :to="{path:'/update',query:{id:hero.id}}">
        <button>修改</button>
        </router-link>
      </td>
    </tr>
    <tr><td colspan="4">分页信息{{pageInfo.pageNum}}/{{pageInfo.pages}}
      <button v-if="pageInfo.hasPreviousPage" @click="selectByPage(pageInfo.prePage)">上一页</button>
      <button v-if="pageInfo.hasNextPage" @click="selectByPage(pageInfo.nextPage)">下一页</button>
    </td>
      <td>
        <router-link :to="{path:'/add'}">
          <button>添加</button>
        </router-link>
      </td>
    </tr>
  </table>
</template>

<script>
    export default {
        name: "HeroTable",
      data(){
          return {
            pageInfo:{}
          }
      },
      methods:{
        selectByPage(pageNo){
          this.axios({
            method:"get",
            url:"/hero/selectByPage.do",
            params:{
              pageNo:pageNo
            }
          }).then((resp)=>{
            this.pageInfo=resp.data;
          })
        },
        deleteHero(id){
          //发出ajax请求删除数据
          this.axios({
            method:"get",
            url:"hero/delete.do",
            params:{
              id:id
            }
          }).then((resp)=>{
            this.msg=resp.data.msg;
            //再次查询数据
            this.selectByPage(1);
          })


        }
      },
      created(){
        this.selectByPage(1);
      }
    }
</script>

<style scoped>

</style>
